<template>
  <div class="zss-index">
    <div class="zss-main">
      <div class="flex header-parent" :class="scrollTop > 600 ? 'scroll-header70' : 'scroll-header80'">
        <div class="header">
          <div class="flex w1200" style="justify-content: space-between;">
            <div class="header-name">
              <template v-if="!is_edit">{{ user.company_name }}</template>
              <Select
                v-model="user.company_id"
                :class="selectOpt == 1 ? 'scroll-top' : ''"
                v-else
                filterable
                style="width:500px;"
                :remote-method="getAllCompanyData"
              >
                <Option v-for="item in companyList" :value="item.id" :key="item.id + 'company'">
                  {{ item.companyName }}
                </Option>
              </Select>
            </div>
            <div class="person-info">
              <ul class="flex">
                <li @click="scrollToId('person', 0)" :class="selectOpt == 0 ? 'active' : ''">个人介绍</li>
                <li @click="scrollToId('aboutMe', 1)" :class="selectOpt == 1 ? 'active' : ''">关于</li>
                <li @click="scrollToId('person', 2)" :class="selectOpt == 2 ? 'active' : ''">技巧</li>
                <li @click="scrollToId('person', 3)" :class="selectOpt == 3 ? 'active' : ''">工作</li>
                <li @click="scrollToId('person', 4)" :class="selectOpt == 4 ? 'active' : ''">联系方式</li>
                <li @click="editMyInfo">{{ is_edit ? '保存' : '编辑信息' }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div id="person" class="scroll-to self-introduce flex" :style="{ backgroundImage: `url(${bgImg}` }">
        <div class="my-name flex">
          <p>我叫:{{ user.name }}</p>
          <p v-if="!is_edit">{{ showInfo }}|</p>
          <div v-else class="flex add-info">
            <Input
              v-show="my_info.length > 1"
              v-for="(item, i) in my_info"
              v-model="my_info[i]"
              style="width:500px"
              :key="i + 'my_info11'"
              icon="md-close"
              @on-click="delMyInfo(0, i)"
            >
            </Input>
            <Input
              v-show="my_info.length == 1"
              v-for="(item, i) in my_info"
              v-model="my_info[i]"
              style="width:500px"
              :key="i + 'my_info'"
            >
            </Input>
            <Button
              @click="delMyInfo(1)"
              v-show="my_info.length < 9"
              icon="md-add"
              class="mt20"
              type="primary"
              shape="circle"
            ></Button>
          </div>
        </div>
      </div>
      <div id="aboutMe" class="scroll-to about-me">
        <div class="w1200 about-me-detail flex">
          <div class="about-me-left">
            <!-- 个人信息 -->
            <div class="flex">
              <Upload
                v-if="is_edit"
                accept="image/*"
                action="xxx"
                style="position:relative;"
                :before-upload="uploadPic"
              >
                <img :src="picBase + user.pic" width="150" height="180" class="img-box-shaw" />
                <Icon type="md-cloud-upload" class="upload-pic-user" />
              </Upload>
              <img v-else :src="picBase + user.pic" width="150" height="180" />
              <div class="ml30 user-info">
                <p>
                  <span class="title-s">姓名:</span>
                  <template v-if="!is_edit">
                    {{ user.name }}
                  </template>
                  <Input v-else v-model="user.name"></Input>
                </p>
                <p>
                  <span class="title-s">职业:</span>
                  <template v-if="!is_edit">
                    {{ user.job }}
                  </template>
                  <Input v-else v-model="user.job"></Input>
                </p>
                <p>
                  <span class="title-s">电子邮箱:</span>
                  <template v-if="!is_edit">
                    {{ user.email }}
                  </template>
                  <Input v-else type="email" v-model="user.email"></Input>
                </p>
                <p>
                  <span class="title-s">手机号:</span>
                  <template v-if="!is_edit">
                    {{ user.mobile }}
                  </template>
                  <Input v-else type="tel" v-model="user.mobile"></Input>
                </p>
              </div>
            </div>
            <!-- 技能 -->
            <div class="person-skills mt30">
              <div class="title">
                技能
                <Icon type="md-add-circle" class="hand" @click="delSkills(1)" v-show="is_edit && skills.length < 6" />
              </div>
              <div class="skill-detail mt20" v-for="(skill, i) in skills" :key="i">
                <span class="fw6" v-show="!is_edit">{{ skill.title }}:</span>
                <Input v-model="skill.title" style="width:95%" v-show="is_edit"></Input>
                <Icon type="md-trash" class="ml5 hand" v-show="is_edit" @click="delSkills(0, i)" />
                <span v-show="!is_edit">
                  {{ skill.info }}
                </span>
                <Input v-model="skill.info" type="textarea" :rows="3" v-show="is_edit"></Input>
              </div>
            </div>
          </div>
          <div class="about-me-right flex">
            <span class="fw6 title">关于我</span>
            <div class="mt30 main">
              <div v-html="aboutMe" v-show="!is_edit"></div>
              <!-- <p v-show="!is_edit" v-for="(item, i) in aboutMe" :key="i + 'about'" v-html="item"></p> -->
              <div v-show="is_edit" id="editHtml" style="height:100%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <BackTop :height="100" :bottom="-20">
      <div class="top flex"><Icon type="ios-arrow-up" /></div>
    </BackTop>
  </div>
</template>

<script lang="ts">
import Edit from 'wangeditor'
import { fileUpload } from '@/utils/upload/config'
import { sysGetInfo, getAllCompany, sysEditCompany, sysEditMyInfo, sysEditUserInfo } from 'api/api.ts'
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class Index extends Vue {
  private my_info: string[] = [] // 轮播的个人信息
  private is_edit = false
  private setInter = 0
  private setTime = 0
  private editor: any = {}
  private user = this.$store.state.user
  private skills = [{ title: '', info: '' }]
  private aboutMe = []
  private companyList = [] // 公司列表
  private picBase = process.env.VUE_APP_CLOUD_URL
  private bgImg = process.env.VUE_APP_CLOUD_URL + process.env.VUE_APP_BG
  private showInfo = ''
  private selectOpt = 0
  private nowIndex = 0
  private scrollTop = 0
  private last = 0
  private search = ''
  private page = 1
  private pageSize = 20
  private scrollArr: number[] = []

  private webEditCompany() {
    return new Promise((resolve, reject) => {
      const p = {
        user_id: this.user.user_id,
        company_id: this.user.company_id
      }
      sysEditCompany(p).then((res: Result) => {
        if (res.status) {
          this.user.company_name = res.data.company_name
          this.user.company_id = res.data.company_id
          this.$store.dispatch('setState', {
            key: 'user',
            value: this.user
          })
          resolve()
        } else {
          reject(res.msg)
        }
      })
    })
  }

  private webEditMyInfo() {
    return new Promise((resolve, reject) => {
      const params = {
        skills: JSON.stringify(this.skills),
        aboutMe: this.editor.txt.html(),
        selfIntroduce: JSON.stringify(this.my_info)
      }
      sysEditMyInfo(params).then((res: Result) => {
        if (res.status) {
          resolve()
        } else {
          reject(res.msg)
        }
      })
    })
  }

  private webEditUserInfo() {
    return new Promise((resolve, reject) => {
      const params = {
        ...this.user
      }
      sysEditUserInfo(params).then((res: Result) => {
        if (res.status) {
          this.$store.dispatch('setState', {
            key: 'user',
            value: this.user
          })
          resolve()
        } else {
          reject(res.msg)
        }
      })
    })
  }

  // 上传图片
  private uploadPic(file: File) {
    fileUpload(file).then((res: any) => {
      this.user.pic = res.key
    })
  }

  // 编辑信息
  private editMyInfo() {
    this.is_edit = !this.is_edit
    if (this.is_edit) {
      clearInterval(this.setInter)
      clearTimeout(this.setTime)
      this.editor.txt.html(this.aboutMe)
    } else {
      Promise.all([this.webEditCompany(), this.webEditMyInfo(), this.webEditUserInfo()]).then(
        () => {
          this.getPersonInfo()
          this.$Message.success('操作成功')
        },
        (err: string) => {
          this.$Message.error(err)
        }
      )

      this.showMyPersonInfo()
    }
  }
  // 删除技能
  private delSkills(type: number, index: number) {
    if (type) {
      const obj = {
        title: '',
        info: ''
      }
      this.skills.push(obj)
    } else {
      this.skills.splice(index, 1)
    }
  }
  // 滚动到指定的id
  private scrollToId(id: string, index: number) {
    this.selectOpt = index
    // document.getElementById  获取到的是一个 HTMLElement对象  所以这里做一下类型断言
    const dom = document.getElementById(id) as HTMLElement
    dom.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  }
  // 个人信息展示   文字输入删除效果
  private showMyPersonInfo() {
    const tempArr = this.my_info[this.nowIndex].split('')
    let i = 0
    this.showInfo = ''
    this.setInter = setInterval(() => {
      if (i <= tempArr.length - 1) {
        this.showInfo += tempArr[i]
        i++
      } else {
        if (this.nowIndex < this.my_info.length - 1) {
          this.nowIndex++
        } else {
          this.nowIndex = 0
        }
        clearInterval(this.setInter)
        this.setTime = setTimeout(() => {
          const st = setInterval(() => {
            if (this.showInfo != '') {
              this.showInfo = this.showInfo.substr(0, this.showInfo.length - 1)
            } else {
              clearInterval(st)
              this.showMyPersonInfo()
            }
          }, 50)
        }, 2000)
      }
    }, 150)
  }
  // 获取个人信息
  private getPersonInfo() {
    return new Promise(resolve => {
      return sysGetInfo().then((res: Result) => {
        if (res.status) {
          this.aboutMe = res.data.aboutMe
          this.skills = JSON.parse(res.data.skills)
          this.my_info = JSON.parse(res.data.selfIntroduce)
          resolve(true)
        } else {
          this.$Message.error(res.msg)
          resolve(false)
        }
      })
    })
  }
  private getAllCompanyData(search = '') {
    const p = {
      page: this.page,
      pageSize: this.pageSize,
      search: search
    }
    getAllCompany(p).then((res: Result) => {
      if (res.status) {
        this.companyList = res.data.list
      } else {
        this.companyList = []
      }
    })
  }
  // 删除相关的个人信息
  delMyInfo(type: number, i: number) {
    if (type) {
      this.my_info.push('')
    } else {
      this.my_info.splice(i, 1)
    }
  }

  mounted() {
    this.editor = new Edit('#editHtml')
    // 自定义菜单配置
    this.editor.config.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'link', // 插入链接
      'backColor', // 背景颜色
      'code', // 插入代码
      'undo' // 撤销
    ]
    this.editor.create()
    const dom = document.getElementsByClassName('w-e-text-container')[0] as HTMLDivElement
    dom.style.height = '100%'
  }
  async created() {
    this.getAllCompanyData()
    const flag = await this.getPersonInfo()

    this.$nextTick(() => {
      if (flag) {
        this.showMyPersonInfo()
      }
      const domArr = document.getElementsByClassName('scroll-to') as HTMLCollectionOf<HTMLDivElement>
      document.body.style.overflow = ''
      Array.from(domArr).forEach((res: HTMLElement) => {
        this.scrollArr.push(res.offsetTop)
      })
      window.addEventListener(
        'scroll',
        (e: any) => {
          const now = Date.now()
          this.scrollTop = e.target.documentElement.scrollTop
          if (now - this.last > 1000) {
            for (let i = 0; i < this.scrollArr.length; i++) {
              if (this.scrollTop < 600) {
                this.selectOpt = 0
                return
              } else if (this.scrollTop <= this.scrollArr[i] + 600 && i > 0) {
                this.selectOpt = i
                return
              }
            }
            this.last = now
          }
        },
        true
      )
      this.scrollTop = document.documentElement.scrollTop
      for (let i = 0; i < this.scrollArr.length; i++) {
        if (this.scrollTop < 600) {
          this.selectOpt = 0
          return
        } else if (this.scrollTop <= this.scrollArr[i] + 600 && i > 0) {
          this.selectOpt = i
          return
        }
      }
    })
  }
}
</script>

<style lang="less">
@import url('./mine.less');
</style>
